<script setup lang="ts">
import {
  ref,
  onMounted,
  type HtmlHTMLAttributes,
  reactive,
  h,
  nextTick,
} from "vue";
import Form from "@/components/Form/Form.vue";
import FormItem from "@/components/Form/FormItem.vue";
import Input from "@/components/Input/Input.vue";
import Button from "./components/Button/Button.vue";
let formParams = reactive({
  username: "user",
  password: "",
  test: "",
});
let rules = reactive({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" },{
    validator: (rule: any, value: any,) => {
     return value==formParams.password
    },message:'测试',trigger:'blur'
  }],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { required:true, min: 3, max: 9, message: "长度在 3 到 9 个字符", trigger: "change" },
  ],
  // test: [{required:true, message: '测试',trigger: 'blur' },{min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'change'}]
});
let form = ref()
const validator = async ()=>{
  try {
    await form.value.validate()
    console.log('success');
  } catch (error) {
    console.log('the error',error);
  } 
}
//重置
const resetField = ()=>{
  form.value.resetFields()
}
//清除表单验证
const clearValidate = ()=>{
  form.value.clearValidate()
}
</script>

<template>
  <div class="box">
    <Form :model="formParams" :rules="rules" ref="form">
      <FormItem label="用户名" prop="username">
        <Input placeholder="请输入用户名" v-model="formParams.username"></Input>
      </FormItem>
      <FormItem label="密码" prop="password">
        <Input placeholder="请输入密码" v-model="formParams.password"></Input>
      </FormItem>
      <!-- <FormItem label="测试" prop="test">
    <template #default="{validate}">
      <input type="text" v-model="formParams.test" @blur="validate('change')">
    </template>
  </FormItem> -->
    </Form>
    
  </div>
  <Button type="success" @click="validator">校验</Button>
  <Button type="danger" @click="resetField">重置</Button>
  <Button type="info" @click="clearValidate">清空校验</Button>
</template>

<style scoped>
.box {
  width: 300px;
}
</style>
